<template>
  <view>
    <!-- <view class="cu-custom">
      <view class="cu-custom-space" :style="{ height: top_height }"></view>
      <view class="cu-custom-1">
        <view class="back" @click="goBack()">
        <image v-if="isWeixin" src="../../static/icon_back0.png"></image>
        </view>
        <view class="title text-left">个人风险报告</view>
      </view>
    </view> -->
    <!-- <view class="cu-custom-con" :style="{ height: top_height }"></view> -->
    <!-- <view class="cu-custom-con2"></view> -->
    <view class="report_top"
      ><image src="../../static/report_top.png"></image
    ></view>
    <view v-if="has_report == 'N'">
      <view class="no_report">
        <view class="no_report_box">
          <view class="hspace50"></view>
          <view class="no_report_con"> 报告过期或正在生成，请等待 </view>
        </view>
      </view>
    </view>
    <view v-if="has_report == 'Y'">
      <!--信用等级-->
      <view class="report_lv">
        <view class="report_lv_box">
          <view class="hspace50"></view>
          <view class="lv_con">
            <view class="lv_img"
              ><view
                class="lv_img_div"
                :style="{ transform: lv_data.lv_transform }"
              >
                <image
                  src="../../static/lv_img.png"
                  v-if="lv_data.lv_transform_val <= 50"
                ></image>
                <image
                  src="../../static/lv_img2.png"
                  v-if="lv_data.lv_transform_val > 50"
                ></image> </view
            ></view>
            <view class="lv_txt1">{{ lv_data.lv_val }}</view>
            <view class="lv_txt2">信用等级</view>
            <view class="lv_txt3">生成日期：{{ lv_data.lv_date }}</view>
          </view>
        </view>
      </view>
      <!--通过率-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="pass_txt1"
            ><text>申请通过率：</text
            ><text class="orange">{{ pass_data.pass_rate }}</text></view
          >
          <view class="pass_line">
            <view
              class="pass_line_val"
              :style="{ width: pass_data.pass_rate }"
            ></view>
          </view>
          <view class="pass_txt2">小贴士：{{ pass_data.pass_txt }}</view>
          <view class="pass_txt3"
            >说明：此等级及申请通过率仅对此报告有效，根据数据测
            算所得，仅供参考。</view
          >
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
      <!--基本信息-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="report_box_title">
            <label></label>
            <text>基本信息</text>
          </view>
          <view class="baseinfo_con">
            <view class="baseinfo_row">
              <label>姓名：</label>
              <text>{{ baseinfo_data.name }}</text>
            </view>
            <view class="baseinfo_row">
              <label>年龄：</label>
              <text>{{ baseinfo_data.age }}</text>
            </view>
            <view class="baseinfo_row">
              <label>手机号码：</label>
              <text>{{ baseinfo_data.mobile }}</text>
            </view>
            <view class="baseinfo_row">
              <label>身份证号码：</label>
              <text>{{ baseinfo_data.idcard }}</text>
            </view>
            <view class="baseinfo_row">
              <label>身份证地址：</label>
              <text>{{ baseinfo_data.idcard_address }}</text>
            </view>
            <view class="baseinfo_row">
              <label>检验结果：</label>
              <text>{{ baseinfo_data.result }}</text>
            </view>
          </view>
          <view class="baseinfo_txt"
            >建议：申请人使用实名号码可提高申请通过率。所
            在居住地稳定也有利于申请。</view
          >
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
      <!--报告综述-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="report_box_title">
            <label></label>
            <text>报告综述</text>
          </view>
          <view class="overview_tab">
            <view class="overview_tab_one">
              <image src="../../static/overview_risk_bg.png"></image>
              <label>{{ overview_data.risknum }}</label>
              <text>风险项</text>
            </view>
            <view class="overview_tab_one">
              <image src="../../static/overview_safe_bg.png"></image>
              <label>{{ overview_data.safenum }}</label>
              <text>正常项</text>
            </view>
            <view class="overview_tab_one">
              <image src="../../static/overview_optimize_bg.png"></image>
              <label>{{ overview_data.optimizenum }}</label>
              <text>优化项</text>
            </view>
          </view>
          <view class="overview_list">
            <view
              class="overview_list_one"
              v-for="(item, index) in overview_data.list"
              :key="index"
            >
              <label>{{ item.name }}</label
              ><text
                :class="
                  item.status == '正常'
                    ? 'status1'
                    : item.status == '优化'
                    ? 'status2'
                    : 'status3'
                "
                >{{ item.status }}</text
              >
            </view>
          </view>
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
      <!--报告详情-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="report_box_title">
            <label></label>
            <text>报告详情</text>
          </view>
          <view class="report_info_top">
            <label>{{ info_data.platformnum }}</label>
            <text>一年内在多个平台高危风险</text>
            <image src="../../static/report_info_top_img.png"></image>
          </view>
          <view class="report_info_list">
            <view
              class="report_info_list_one"
              v-for="(item, index) in info_data.list"
              :key="index"
            >
              <label>{{ item.name }}</label
              ><text>{{ item.num }}</text>
            </view>
            <view class="hspace20"></view>
          </view>
          <view class="report_info_grade">
            <view class="report_info_grade_one">
              <label>申请行为评级</label>
              <view class="star_div">
                <view class="star_bg"
                  ><image src="../../static/star_bg.png"></image
                ></view>
                <view class="star" :style="{ width: info_data.grade1 }"
                  ><image src="../../static/star.png"></image
                ></view>
              </view>
            </view>
            <view class="report_info_grade_one">
              <label>申请频率评级</label>
              <view class="star_div">
                <view class="star_bg"
                  ><image src="../../static/star_bg.png"></image
                ></view>
                <view class="star" :style="{ width: info_data.grade2 }"
                  ><image src="../../static/star.png"></image
                ></view>
              </view>
            </view>
          </view>
          <view class="report_info_txt"
            >建议：申请人使用实名号码可提高申请通过率。所
            在居住地稳定也有利于申请。</view
          >
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
      <!--消费分析-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="report_box_title">
            <label></label>
            <text>消费分析</text>
          </view>
          <view class="consume_top">
            <view class="consume_top_chart">
              <div class="chart_circle chart_left">
                <div
                  class="chart_left_con"
                  :style="{ transform: consume_data.left_rotate }"
                ></div>
              </div>
              <div class="chart_circle chart_right">
                <div
                  class="chart_right_con"
                  :style="{ transform: consume_data.right_rotate }"
                ></div>
              </div>
              <div class="chart_txt">{{ consume_data.chart_rate }}%</div>
            </view>
            <view class="consume_top_txt">{{ consume_data.chart_txt }}</view>
          </view>
          <view class="consume_list">
            <view
              class="consume_list_one"
              v-for="(item, index) in consume_data.list"
              :key="index"
            >
              <label>{{ item.name }}</label
              ><text>{{ item.status }}</text>
            </view>
            <view class="hspace20"></view>
          </view>
          <view class="report_info_grade">
            <view class="report_info_grade_one">
              <label>消费行为评级</label>
              <view class="star_div">
                <view class="star_bg"
                  ><image src="../../static/star_bg.png"></image
                ></view>
                <view class="star" :style="{ width: consume_data.grade1 }"
                  ><image src="../../static/star.png"></image
                ></view>
              </view>
            </view>
            <view class="report_info_grade_one">
              <label>消费频率评级</label>
              <view class="star_div">
                <view class="star_bg"
                  ><image src="../../static/star_bg.png"></image
                ></view>
                <view class="star" :style="{ width: consume_data.grade2 }"
                  ><image src="../../static/star.png"></image
                ></view>
              </view>
            </view>
          </view>
          <view class="report_info_txt"
            >建议：工作收入持续稳定，有固定资产可大大降低
            消费风险哦，不要逾期。</view
          >
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
      <!--行为分析-->
      <view class="report_box_div">
        <view class="hspace10"></view>
        <view class="report_box">
          <view class="hspace30"></view>
          <view class="report_box_title">
            <label></label>
            <text>行为分析</text>
          </view>
          <view class="performance">
            <view class="action_title">
              <image src="../../static/action_title_left.png"></image>
              <text>行为分析-履约行为</text>
              <image src="../../static/action_title_right.png"></image>
            </view>
            <view class="action_img">
              <image
                v-if="
                  action_data.performance == '极差' ||
                  action_data.performance == '较差'
                "
                src="../../static/action_bad.png"
              ></image>
              <image
                v-if="action_data.performance == '一般'"
                src="../../static/action_normal.png"
              ></image>
              <image
                v-if="
                  action_data.performance == '优秀' ||
                  action_data.performance == '极好'
                "
                src="../../static/action_nice.png"
              ></image>
            </view>
            <view class="action_txt2"
              >履约行为:{{ action_data.performance_txt }}</view
            >
            <view class="action_line">
              <view
                class="action_line_val"
                :style="{ width: action_data.performance_rate }"
              ></view>
            </view>
            <view class="report_info_grade">
              <view class="report_info_grade_one">
                <label>履约行为评级</label>
                <view class="star_div">
                  <view class="star_bg"
                    ><image src="../../static/star_bg.png"></image
                  ></view>
                  <view class="star" :style="{ width: action_data.grade1 }"
                    ><image src="../../static/star.png"></image
                  ></view>
                </view>
              </view>
              <view class="report_info_grade_one">
                <label>履约频率评级</label>
                <view class="star_div">
                  <view class="star_bg"
                    ><image src="../../static/star_bg.png"></image
                  ></view>
                  <view class="star" :style="{ width: action_data.grade2 }"
                    ><image src="../../static/star.png"></image
                  ></view>
                </view>
              </view>
            </view>
            <view class="hspace30"></view>
          </view>
          <view class="hspace30"></view>
        </view>
        <view class="hspace30"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDetail } from "@/api/order";

export default {
  data() {
    return {
      id: 0,
      isWeixin: false,
      top_height: "50rpx",
      has_report: "",
      lv_data: {
        lv_transform_val: 0,
        lv_transform: "rotate(-0deg)",
        lv_val: "A",
        lv_date: "2021年06月22日",
      },
      pass_data: {
        pass_rate: "70%",
        pass_txt: "存在风险记录，建议维护自身良好信用",
      },
      baseinfo_data: {
        name: "**强",
        age: "32",
        mobile: "188****8888",
        idcard: "*****************1230",
        idcard_address: "浙江省宁波市鄞州区",
        result: "二要素验证一致",
      },
      overview_data: {
        risknum: 1,
        safenum: 7,
        optimizenum: 1,
        list: [
          { name: "基本信息", status: "正常" },
          { name: "二要素验证", status: "正常" },
          { name: "申请记录", status: "正常" },
          { name: "法院失信名单", status: "正常" },
          { name: "法院执行名单", status: "风险" },
          { name: "风险关注名单", status: "正常" },
        ],
      },
      info_data: {
        platformnum: 0,
        grade1: "90%",
        grade2: "70%",
        list: [
          { name: "线上消费分期申请次数", num: "无" },
          { name: "银行申请次数", num: "无" },
          { name: "汽车金融申请次数", num: "无" },
          { name: "信用卡申请次数", num: "无" },
          { name: "线下消费分期申请次数", num: "无" },
          { name: "线下现金分期申请次数", num: "无" },
          { name: "线上现金分期申请次数", num: "无" },
          { name: "小额现金贷申请次数", num: "无" },
          { name: "申请其他次数", num: "无" },
        ],
      },
      consume_data: {
        left_rotate: "rotate(0deg)",
        right_rotate: "rotate(0deg)",
        chart_rate: "30",
        chart_txt: "一年内您的消费 等级适中",
        grade1: "90%",
        grade2: "60%",
        list: [
          { name: "拒收订单等级", status: "优" },
          { name: "恶意订单等级", status: "良" },
          { name: "高危品类消费指数", status: "优" },
          { name: "交易风险指数", status: "优" },
          { name: "电商联系方式稳定性", status: "良" },
          { name: "电商收货地址稳定性", status: "优" },
        ],
      },
      action_data: {
        performance: "nice",
        performance_txt: "优秀",
        performance_rate: "70%",
        grade1: "80%",
        grade2: "50%",
      },
    };
  },
  onShow() {
    // this.lv_transform = "rotate(-"+this.lv_transform_val+"deg)";
    // let consume_rotate = this.consume_data.chart_rate *360/100;
    // if(consume_rotate > 180){
    // 	this.consume_data.right_rotate = 'rotate(180deg)';
    // 	this.consume_data.left_rotate = 'rotate('+(consume_rotate - 180)+'deg)';
    // }else{
    // 	this.consume_data.right_rotate = 'rotate('+consume_rotate+'deg)';
    // }
    // if(this.action_data.num >=50){
    // 	this.action_data.txt_left = '160rpx';
    // }else{
    // 	this.action_data.txt_left = '0rpx';
    // }
    // this.action_data.rotate = 'rotate('+(180*this.action_data.num/100)+'deg)';

    // if (this.$store.state.platform == "miniapp-wx") {
    //   this.isWeixin = true;
    //   let clientrect = wx.getMenuButtonBoundingClientRect();
    //   this.top_height = clientrect.top + "px";
    // } else if (this.$store.state.platform == "miniapp-alipay") {
    var that = this;
    uni.getSystemInfo({
      success: function (e) {
        let height = e.statusBarHeight + e.titleBarHeight;
        that.top_height = height - 40 + "px";
      },
    });
    // }
    //滑动到顶部
    uni.pageScrollTo({
      scrollTop: 0,
    });
    this.getDetail();
  },
  onLoad(opt) {
    if (opt.id) {
      this.id = opt.id;
    }
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: "/pages/user/index",
      });
    },
    getDetail() {
      getDetail(this.id).then((res) => {
        console.log("我看下哈哈哈", res);
        if (res.code == 200) {
          this.has_report = "Y";
          this.lv_data = res.data.lv_data;
          this.pass_data = res.data.pass_data;
          this.baseinfo_data = res.data.baseinfo_data;
          this.overview_data = res.data.overview_data;
          this.info_data = res.data.info_data;
          this.consume_data = res.data.consume_data;
          this.action_data = res.data.action_data;
        } else {
          this.has_report = "N";
        }
      });
    },
  },
};
</script>

<style>
.cu-custom {
  width: 100%;
  height: auto;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  background: red;
}
.cu-custom-space {
  width: 100%;
  height: 50rpx;
}
.cu-custom-1 {
  width: 650rpx;
  height: 65rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.cu-custom .back {
  width: 15rpx;
  height: 30rpx;
  padding: 18rpx 25rpx 17rpx 0;
}
.cu-custom .back image {
  width: 100%;
  height: 100%;
  display: block;
}
.cu-custom .title {
  width: 570rpx;
  height: 65rpx;
  line-height: 65rpx;
  overflow: hidden;
  font-size: 30rpx;
}
.cu-custom-con {
  width: 100%;
  height: auto;
}
.cu-custom-con2 {
  width: 100%;
  height: 64rpx;
}

.report_top {
  width: 100%;
  height: 533rpx;
}
.report_top image {
  width: 100%;
  height: 100%;
}
.report_lv {
  width: 100%;
  height: 370rpx;
  position: relative;
  background: #fff;
}
.report_lv_box {
  width: 700rpx;
  height: 485rpx;
  background: #fff;
  border: none;
  border-radius: 20rpx;
  box-shadow: 8rpx 8rpx 20rpx #999;
  position: absolute;
  top: -150rpx;
  left: 25rpx;
}
.report_lv_box .lv_con {
  width: 460rpx;
  height: 420rpx;
  margin: 0 auto;
  position: relative;
}
.report_lv_box .lv_con .lv_bg {
  width: 400rpx;
  height: 260rpx;
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  z-index: 10;
  overflow: hidden;
}
.report_lv_box .lv_con .lv_bg image {
  width: 400rpx;
  height: 400rpx;
}
.report_lv_box .lv_con .lv_img {
  width: 400rpx;
  height: 260rpx;
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  z-index: 11;
  overflow: hidden;
}
.report_lv_box .lv_con .lv_img .lv_img_div {
  width: 400rpx;
  height: 400rpx;
}
.report_lv_box .lv_con .lv_img image {
  width: 100%;
  height: 100%;
}
.report_lv_box .lv_con .lv_txt1 {
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  font-size: 120rpx;
  text-align: center;
  font-weight: bold;
  color: #0079fd;
  position: absolute;
  z-index: 12;
  top: 100rpx;
  left: 0;
}
.report_lv_box .lv_con .lv_txt2 {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 36rpx;
  text-align: center;
  color: #6a7179;
  position: absolute;
  z-index: 12;
  top: 270rpx;
  left: 130rpx;
  border-radius: 10rpx;
  background: #e4f0fe;
}
.report_lv_box .lv_con .lv_txt3 {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  text-align: center;
  color: #a5a5ac;
  position: absolute;
  z-index: 12;
  top: 340rpx;
  left: 0;
}

.report_box_div {
  width: 100%;
  height: auto;
}
.report_box {
  width: 700rpx;
  height: auto;
  background: #fff;
  border: none;
  border-radius: 20rpx;
  box-shadow: 8rpx 8rpx 20rpx rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  padding: 24rpx 0;
  margin-bottom: 40rpx;
}

.report_box_title {
  width: 100%;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.report_box_title label {
  width: 10rpx;
  height: 40rpx;
  background: #232ff9;
  display: block;
  border-radius: 2rpx;
}
.report_box_title text {
  width: 675rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 34rpx;
  color: #5b5b5b;
  display: block;
}

.pass_txt1 {
  width: 630rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 34rpx;
  color: #5b5b5b;
  margin: 0 auto;
}
.pass_txt1 .orange {
  color: #ff9700;
  font-weight: bold;
}
.pass_line {
  width: 630rpx;
  height: 45rpx;
  margin: 20rpx auto 0;
  border: none;
  border-radius: 30rpx;
  background: #e5e5e5;
  overflow: hidden;
}
.pass_line .pass_line_val {
  height: 45rpx;
  border: none;
  border-radius: 30rpx;
  background: #ffa961;
}
.pass_txt2 {
  width: 100%;
  height: 45rpx;
  line-height: 45rpx;
  margin-top: 15rpx;
  background: #fff6ee;
  font-size: 26rpx;
  color: #7c7c7c;
  text-indent: 35rpx;
}
.pass_txt3 {
  width: 630rpx;
  height: auto;
  line-height: 35rpx;
  font-size: 26rpx;
  color: #7c7c7c;
  margin: 25rpx auto 0;
}

.baseinfo_con {
  width: 630rpx;
  height: auto;
  margin: 20rpx auto 0;
}
.baseinfo_row {
  width: 630rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 29rpx;
  color: #7c7c7c;
}
.baseinfo_txt {
  width: 630rpx;
  height: auto;
  background: #fff6ee;
  line-height: 40rpx;
  padding: 10rpx 35rpx;
  color: #7c7c7c;
  font-size: 28rpx;
  margin-top: 10rpx;
}
.overview_tab {
  width: 510rpx;
  height: 140rpx;
  margin: 40rpx auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.overview_tab_one {
  width: 126rpx;
  height: 140rpx;
  overflow: hidden;
  position: relative;
}
.overview_tab_one image {
  width: 100%;
  height: 100%;
}
.overview_tab_one label {
  width: 100%;
  height: 35rpx;
  line-height: 35rpx;
  text-align: center;
  font-size: 35rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  position: absolute;
  left: 0;
  top: 35rpx;
}
.overview_tab_one text {
  width: 100%;
  height: 35rpx;
  line-height: 35rpx;
  text-align: center;
  font-size: 26rpx;
  color: #fff;
  display: block;
  position: absolute;
  left: 0;
  top: 70rpx;
}
.overview_list {
  width: 630rpx;
  height: auto;
  margin: 20rpx auto 0;
}
.overview_list_one {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 26rpx;
}
.overview_list_one label {
  width: 500rpx;
  height: 60rpx;
  display: block;
  color: #7c7c7c;
}
.overview_list_one text {
  width: 100rpx;
  height: 60rpx;
  display: block;
  text-align: right;
}
.overview_list_one text.status1 {
  color: #4da9ff;
}
.overview_list_one text.status2 {
  color: #ffb867;
}
.overview_list_one text.status3 {
  color: #ff6167;
}
.report_info_top {
  width: 630rpx;
  height: 190rpx;
  border-bottom: 2rpx solid #f1f1f1;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.report_info_top label {
  width: 80rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 60rpx;
  font-weight: bold;
  display: block;
  color: #0079fd;
  margin-top: 50rpx;
}
.report_info_top text {
  width: 240rpx;
  height: 70rpx;
  line-height: 35rpx;
  font-size: 30rpx;
  color: #8f8f8f;
  display: block;
  margin-top: 50rpx;
}
.report_info_top image {
  margin-top: 30rpx;
  width: 216rpx;
  height: 141rpx;
  display: block;
}
.report_info_list {
  width: 630rpx;
  height: auto;
  margin: 20rpx auto 0;
  border-bottom: 2rpx solid #f1f1f1;
}
.report_info_list_one {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 26rpx;
  color: #7c7c7c;
}
.report_info_list_one label {
  width: 500rpx;
  height: 60rpx;
  display: block;
}
.report_info_list_one text {
  width: 100rpx;
  height: 60rpx;
  display: block;
  text-align: right;
}
.report_info_grade {
  width: 630rpx;
  height: 80rpx;
  margin: 20rpx auto 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.report_info_grade_one {
  width: 100%;
  height: 35rpx;
  display: flex;
  flex-direction: row;
  position: relative;
}
.report_info_grade_one label {
  font-size: 30rpx;
  color: #8f8f8f;
  line-height: 35rpx;
  width: 200rpx;
  height: 35rpx;
  display: block;
}
.report_info_grade_one .star_div {
  width: 200rpx;
  height: 35rpx;
  position: relative;
}
.report_info_grade_one .star_bg {
  width: 200rpx;
  height: 35rpx;
}
.report_info_grade_one .star_bg image {
  width: 200rpx;
  height: 35rpx;
}
.report_info_grade_one .star {
  height: 35rpx;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.report_info_grade_one .star image {
  width: 200rpx;
  height: 35rpx;
}
.report_info_txt {
  width: 630rpx;
  height: auto;
  padding: 10rpx 35rpx;
  background: #fff6ee;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #7c7c7c;
  margin-top: 20rpx;
}

.consume_top {
  width: 630rpx;
  height: 250rpx;
  border-bottom: 2rpx solid #f1f1f1;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.consume_top_chart {
  width: 200rpx;
  height: 200rpx;
  margin-top: 25rpx;
  margin-left: 45rpx;
  position: relative;
  overflow: hidden;
  border-radius: 100%;
}

.consume_list {
  width: 630rpx;
  height: auto;
  margin: 20rpx auto 0;
  border-bottom: 2rpx solid #f1f1f1;
}
.consume_list_one {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 26rpx;
}
.consume_list_one label {
  width: 500rpx;
  height: 50rpx;
  display: block;
  color: #7c7c7c;
}
.consume_list_one text {
  width: 100rpx;
  height: 50rpx;
  display: block;
  text-align: right;
  color: #4da9ff;
}
.chart_circle {
  position: absolute;
  height: 100%;
  overflow: hidden;
  background: #0088f6;
}
.chart_left {
  width: 100rpx;
  border-radius: 100rpx 0 0 100rpx/100rpx 0 0 100rpx;
}
.chart_left .chart_left_con {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transform-origin: right center;
  transform: rotate(0deg);
  border-radius: 100rpx 0 0 100rpx/100rpx 0 0 100rpx;
  background: #d8d8d8;
}
.chart_right {
  right: 0;
  width: 100rpx;
  border-radius: 0 100rpx 100rpx 0/0 100rpx 100rpx 0;
}
.chart_right .chart_right_con {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: rotate(0deg);
  border-radius: 0 100rpx 100rpx 0/0 100rpx 100rpx 0;
  background: #d8d8d8;
}
.chart_txt {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
  width: 60%;
  left: 20%;
  top: 20%;
  border-radius: 100%;
  background: #fff;
  color: #0088f6;
}
.consume_top_txt {
  width: 210rpx;
  height: 70rpx;
  margin-left: 50rpx;
  margin-top: 90rpx;
  color: #8f8f8f;
  font-size: 30rpx;
}
.action_img {
  width: 449rpx;
  height: 339rpx;
  margin: 20rpx auto;
}
.action_img image {
  width: 100%;
  height: 100%;
}
.performance {
  width: 100%;
  height: auto;
}
.action_title {
  width: 100%;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20rpx;
}
.action_title image {
  width: 28rpx;
  height: 30rpx;
  margin-top: 5rpx;
}
.action_title text {
  line-height: 40rpx;
  font-size: 34rpx;
  color: #5b5b5b;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.action_txt2 {
  width: 630rpx;
  height: 40rpx;
  line-height: 40rpx;
  margin: 20rpx auto 0;
  font-size: 34rpx;
  color: #2d2d2d;
}
.action_line {
  width: 630rpx;
  height: 45rpx;
  margin: 20rpx auto 0;
  border: none;
  border-radius: 30rpx;
  background: #e5e5e5;
  overflow: hidden;
}
.action_line .action_line_val {
  height: 45rpx;
  border: none;
  border-radius: 30rpx;
  background: #ffa961;
}

.no_report {
  width: 100%;
  height: 170rpx;
  position: relative;
  background: #fff;
}
.no_report_box {
  width: 700rpx;
  height: 200rpx;
  background: #fff;
  border: none;
  border-radius: 20rpx;
  box-shadow: 8rpx 8rpx 20rpx #999;
  position: absolute;
  top: -150rpx;
  left: 25rpx;
}
.no_report_box .no_report_con {
  width: 460rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0 auto;
  position: relative;
}
</style>
